<script lang="ts" setup>
import { h, reactive, ref, toRefs } from 'vue'
import { AuditOutlined } from '@ant-design/icons-vue'
import { download } from '@/utils/utils'
import { UploadAudio } from '@/components/basic/Upload'
import { cloneDeep } from 'lodash-es'
import Api from '@/api/'
import to from '@/utils/awaitTo'
import { message } from 'ant-design-vue'

// 引用声明
const props = defineProps({
  row: {
    type: Object,
    default: () => {
    }
  }
})

// 引用事件
const emits = defineEmits(['callback'])

// 响应式数据
const formRef = ref()
const state = reactive({
  open: false,
  title: '',
  loading: false,
  form: {
    topicContent: '',
    voiceUrl: '',
    reviewComments: '',
    topicTitle: '',
    audioProductionUrl: '',
    remark: ''
  },
  rules: {
    reviewComments: [{ required: true, message: '请审核0～0', trigger: 'change' }],
    audioProductionUrl: [{ required: true, message: '必须要放入修改好的音频哦', trigger: 'change' }],
    remark: [{ required: true, message: '请输入意见哦,方便制作人理解', trigger: 'change' }]
  }
})

const { open, title, form, rules, loading } = toRefs(state)

// 审核音频
const handleAuditAudio = (item) => {
  title.value = `审核音频 (${item.topicTitle})`
  form.value = item;
  open.value = true;
}

// 提交
const handleAuditAudioSubmit = () => {
  formRef.value
    .validateFields()
    .then(async (values) => {
      console.log(values)
      loading.value = true
      const formDeepData = cloneDeep(form.value)
      const [error, data] = await to(Api.video.videoAuditVoice(formDeepData))
      loading.value = false
      if (!error) {
        console.log(data)
        message.success(`审核操作成功`)
        open.value = false
        emits('callback')
      }
    })
    .catch(info => {
      console.log('Validate Failed:', info)
    })
}


/** 审核状态 */
const AuditTypeDict = [
  {
    label: '审核通过',
    value: '1'
  },
  {
    label: '审核驳回',
    value: '2'
  }
]

</script>

<template>
  <div>
    <a-button :icon="h(AuditOutlined)" type="primary" @click="handleAuditAudio(row)">审核音频</a-button>

    <a-modal v-model:open="open" :maskClosable="true" :ok-button-props="{loading:loading}" :title="title"
             @ok="handleAuditAudioSubmit">
      <a-form ref="formRef" :hideRequiredMark="false" :model="form" :rules="rules" autocomplete="off" layout="vertical">
        <a-form-item label="话题内容">
          <div>
            <span> {{ form.topicContent }}</span>
            <audio :src="form.voiceUrl" autoplay class="w-full mt-4" controls>
              浏览器不支持音频播放。
            </audio>
          </div>
        </a-form-item>

        <a-form-item extra="" label="审核状态" name="reviewComments">
          <a-radio-group v-model:value="form.reviewComments">
            <a-radio v-for="item in AuditTypeDict" :key="item.value"
                     :value="item.value">{{ item.label }}
            </a-radio>
          </a-radio-group>

          <a-button v-if="Number(form.reviewComments) === 2" type="link"
                    @click="download(form.voiceUrl,form.topicTitle)">下载音频
          </a-button>
        </a-form-item>


        <a-form-item v-if="Number(form.reviewComments) === 1" label="上传剪辑完成的音频" name="audioProductionUrl">
          <UploadAudio v-model="form.audioProductionUrl" />
        </a-form-item>


        <a-form-item v-if="Number(form.reviewComments) === 2" label="审核意见" name="remark">
          <a-textarea v-model:value="form.remark" :rows="4" />
        </a-form-item>


      </a-form>
    </a-modal>
  </div>
</template>

<style lang="less" scoped>

</style>
